.topPanel {
  @left: @SYSMARGINLEFT;
  @right: @SYSMARGINRIGHT;
  @height: @SYSTOPPANELHEIGHT;
  @radius: 30px;
  .abs;
  left: @left;
  right: @right;
  height: 60px;
  border-radius: 0 0 @radius @radius;
  color: @color-white;
  > .title {
    .abs;
    left: 30px;
    height: @height;
    line-height: @height;
    font-size: 20px;
    //opacity: 0.8;
  }

  .search {
    .abs;
    top: 15px;
    left: 400px;
    input {
      width: 200px;
    }
  }

  //@media screen and (max-width: 1100px) {
  //  .search {
  //    display: none;
  //  }
  //}

  > .moduleMenus {
    .abs;
    left: 200px;
    display: flex;
    > .menu {
      display: flex;
      margin: 8px;
      margin-right: 0;
      padding: 5px;
      border-radius: 10px;
      //border: 1px solid fade(@color-white, 80);
      .animation();
      cursor: pointer;
      //background-color: fade(@theme, 50);
      &:hover {
        background-color: @theme;
      }
      &.active {
        background-color: @color-green;
      }
      .icon {
        width: 24px;
        height: 24px;
        margin: 4px;
        display: block;
      }
      .label {
        font-size: 16px;
        height: 24px;
        line-height: 24px;
        margin: 4px;
        .tac;
      }
    }
  }

  > .menus {
    display: flex;
    .abs;
    right: 30px;
    top: 4px;
    > .menu {
      .rel;
      margin: 0 5px;
      padding: 4px;
      border-radius: 10px;
      //border: 1px solid fade(@color-white, 80);
      .animation();
      cursor: pointer;
      //background-color: fade(@theme, 50);
      &:hover {
        background-color: @theme;
      }
      &.active {
        background-color: fade(@theme, 50);
      }
      .icon {
        width: 24px;
        height: 24px;
        margin: 0 13px;
        display: block;
      }
      .label {
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-top: 4px;
        .tac;
      }
      .alert {
        .abs;
        width: 20px;
        height: 20px;
        right: 0;
        top: 0;
        background-color: red;
        color: white;
        border-radius: 20px;
        font-size: 12px;
        line-height: 20px;
        .tac;
      }
    }
  }


  //@media screen and (max-width: 1100px) {
  //  .menus {
  //    display: none;
  //  }
  //}
}